<template>
  <!-- 只显示目录(1)和菜单(2)类型，不显示按钮(3)类型 -->
  <template v-if="menu.menuType !== 3">
    <!-- 有子菜单的目录 -->
    <el-sub-menu v-if="hasVisibleChildren" :index="menu.path || String(menu.id)">
      <template #title>
        <el-icon v-if="menu.icon">
          <component :is="menu.icon" />
        </el-icon>
        <span>{{ menu.menuName }}</span>
      </template>
      <menu-item
        v-for="child in visibleChildren"
        :key="child.id"
        :menu="child"
      />
    </el-sub-menu>  

    <!-- 无子菜单的页面 -->
    <el-menu-item v-else-if="menu.visible === 1 && menu.menuType === 2" :index="menu.path">
      <el-icon v-if="menu.icon">
        <component :is="menu.icon" />
      </el-icon>
      <template #title>
        <span>{{ menu.menuName }}</span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  menu: {
    type: Object,
    required: true
  }
})

// 过滤出可见的非按钮子菜单
const visibleChildren = computed(() => {
  if (!props.menu.children) return []
  return props.menu.children.filter(child => child.menuType !== 3 && child.visible === 1)
})

// 判断是否有可见的子菜单
const hasVisibleChildren = computed(() => {
  return visibleChildren.value.length > 0
})
</script>

<script>
export default {
  name: 'MenuItem'
}
</script>